<template>
    <div class="yemian">
        <h3>收货地址：</h3>
        <div v-show="!dizhivalue" class="dizhi">
            <input type="text" placeholder="请输入地址" :value="dizhivalue" @change="changevalue" @keyup.enter="adddizhi">
            <button @click="adddizhi">提交地址</button>
        </div>
        <div v-show="dizhivalue" class="dz"><h5>{{ dizhivalue }}</h5></div>
        <div class="jf"><h2>{{ jifeng }}积分</h2></div>
        <div class="dh" @click="dhwp()">兑换</div>
    </div>
</template>
  
<script>
import {mapState,mapMutations,mapActions} from "vuex"
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'duihuang',
    data () {
      return {
        jifeng: this.$route.params.id,
        }
    },
    computed:{
        ...mapState({
            dizhivalue:state => state.dizhi.dizhivalue,
            jifengvalue:state => state.jifeng.jifengvalue,
        }),
        duihuangjifeng:function(){
            return  Number(this.jifengvalue)-Number(this.jifeng) 
        }
    },
    methods:{
        ...mapMutations({
            changedizhi:"dizhi/changedizhi",
            changejifeng:"jifeng/changejifeng"
        }),
        ...mapActions({
            asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
        }),
        changevalue(e){
            this.changedizhi(e.target.value)
            console.log(this.dizhivalue);
        },
        adddizhi(){
            if (this.dizhivalue.trim().length <= 0) {
                this.asyncChangeIsShowToast({
                    msg:"文本框内容不能为空!",
                    type:"warning"
                })
                return;
            }else{
                this.asyncChangeIsShowToast({
                    msg:"保存成功",
                    type:"success"
                }) 
            }
        },
        dhwp(){
            if (this.dizhivalue.trim().length <= 0) {
                this.asyncChangeIsShowToast({
                    msg:"请先填写地址",
                    type:"warning"
                })
                return;
            }else{
                if( this.duihuangjifeng > 0 || this.duihuangjifeng == 0){
                    this.changejifeng(this.duihuangjifeng);
                    this.asyncChangeIsShowToast({
                        msg:"兑换成功",
                        type:"success"
                    });
                    // 兑换成功后返回上一页
                    this.$router.go(-1);
                }else{
                    this.asyncChangeIsShowToast({
                        msg:"积分不够，不可兑换",
                        type:"warning"
                    }) 
                }
            }
            console.log(this.duihuangjifeng);
        }
    }
} 
</script>
   
<style lang = "less" scoped>
.yemian{
    position:relative;
    text-align:left;
    margin:0 auto;
    margin-top:100px;
    padding:10px;
    width: 600px;
    height: 300px;
    background-color: rgb(245, 245, 245);
    border-radius:15px;
    box-shadow: 0 0 10px #ccc;
    .dizhi{
        font-size: 35px;
        input{
            width:500px; 
            height: 34px;
            margin-top:15px;
            margin-right:10px;
            font-size: 15px;
        }
        button{
            font-size: 15px;
            border: 1px solid black;
            padding: 10px;
            background-color: #856437;
            color: #fff;
            cursor: pointer;
        }
    }
    .dz{
        padding: 10px;
        font-size: 26px;
    }
    .jf{
        position: absolute;
        top:150px;
        left:260px;
    }
    .dh{
        position: absolute;
        top:250px;
        left:260px;
        border: 1px solid black;
        padding: 10px;
        width:35px;
        background-color: #856437;
        color: #fff;
        cursor: pointer;
    }
}
</style>